<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
    .box{
        width: 300px;
        height: 200px;
        background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
        margin: auto;
    }
    .fx{
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 50px;
        color: #fff;
        font-size: 14px;
        background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
        /* background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%); */
        margin-left: 1rem;
    }
    input{
        width: 16px;
        height: 16px;
    }
</style>
<body>
    <div class="box">
        <input type="checkbox" class="qx">全选功能
        <input type="button" value="反选" class="fx">
        <ol>
            <li><input type="checkbox" class="btn">张三</li>
            <li><input type="checkbox" class="btn">李四</li>
            <li><input type="checkbox" class="btn">麻子</li>
        </ol>
    </div>
</body>
<script>
    // 1. 全选功能
    // 创建全选按钮 变化事件
    $('.qx').change(function () {
        //定义变量 保存当前全选按钮是否选中
        var flag = $(this).prop('checked');
        //设置子选项的按钮 值为上面全选的值 保持统一 实现一致
        $('.btn').prop('checked', flag);
    })
    // 2. 选项功能 
    // 创建子选项按钮 变化事件
    $('.btn').change(function () {
        //定义变量 记录所有子选项按钮的个数
        var len1 = $('.btn').length;
        //定义变量 记录所有子选项按钮被选中的个数
        var len2 = $('.btn:checked').length;
        //判断
        if(len1 == len2) {
            $('.qx').prop('checked', true);
        } else {
            $('.qx').prop('checked', false);
        }
         //if中判断代码可以优化为以下代码
        // $('.qx').prop('checked', len1 == len2);  因为此处len1 == len2 的结果就是布尔值
    })
    // 3. 反选功能
    // 创建反选按钮 点击事件
    $('.fx').on('click', function () {
        //遍历所有子选项按钮
        $('.btn').each(function (index, ele) {
            //定义变量 获取每一个子选项按钮是否选中的值
            var flag = $(ele).prop('checked');
            //让子选项按钮是否选中的值取反
            var flag = !flag;
            //取反后再赋值
            $(ele).prop('checked', flag);
        })
        //当反选后 所有子选项没有被选中全选按钮也没有被选中
        var len1 = $('.btn').length;
        var len2 = $('.btn:checked').length;
        $('.qx').prop('checked', len1 == len2);
    })
</script>

</html>